<template>
  <div class="distribution">
    <van-nav-bar title="南昌鸟类分布" @click-left="routerBack()"  left-arrow>
    </van-nav-bar>
    <van-tabs @click-tab="onClickTab" :active="active">
      <Map-Container ref="map" />
      <van-tab
        v-for="(item, index) in place"
        :key="index"
        :title="place[index].placeName"
      >
        <van-divider contentPosition="center">介绍</van-divider>

        <About-Cart :about="item.about"></About-Cart>
<!-- 
        <van-divider contentPosition="center">可观测的鸟类</van-divider>

        <Bird-Cart :birds="item.birdSpecies" /> -->
        <van-divider contentPosition="center">交通方式</van-divider>

        <Traffic-Card :traffic="item.traffic" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";
import MapContainer from "@/components/MapContainer.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import TrafficCard from "./components/TrafficCard.vue";
import AboutCart from "./components/AboutCart.vue";
import BirdCart from "./components/BirdCart.vue";
export default {
  components: { MapContainer, TrafficCard, AboutCart, BirdCart },
  setup() {
    const state = reactive({
      place: [],
    });
    const map = ref(0);
    const router = useRouter();
    const store = useStore();
    const active = ref(0);
    const onClickTab = (e) => {
      map.value.changeMap(state.place[e.name].coord.x, state.place[e.name].coord.y);
    };
    const routerBack = () => {
      router.go(-1);
    };
    const handleClick = () => {};
    onBeforeMount(async () => {
      await store.dispatch("_getJsonInfo");
      state.place = store.state.placeData;
    });

    return { ...toRefs(state), routerBack, active, onClickTab, map, handleClick };
  },
};
</script>
<style lang="less" scoped>
::v-deep(.van-tabs__line){
  background: #1989fa;
  width: 15vw;
}
.distribution {
  overflow-x: hidden;
}
</style>
